<template>
  <div class="chart-container">
    <ViewChart
      ref="myRef"
      :options="myOption"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, defineAsyncComponent, PropType, toRefs, watch } from 'vue';
import { EChartsOption } from 'echarts'
import BaseComponent from 'components/views/BaseComponent.vue';
import { ChartDataItem } from './ChartModel';

const ViewChart = defineAsyncComponent(() => import('components/views/chart/ViewChart.vue'));
export default defineComponent({
  name: 'ChartCurveItem',
  extends: BaseComponent,
  props: {
    chartParam: {
      type: Object,
      default: () => {
        return {
          title: '实时曲线',
          xName: '时间',
          xType: 'category',
          yName: '温度',
          yType: 'value',
          xDataNum: 7
        }
      }
    },
    chartData: {
      type: Array as PropType<ChartDataItem[]>,
      default: () => {
        return []
      }
    }
  },
  components: {
    ViewChart
  },
  setup (props, context) {
    // 响应数据解构
    const {
      chartParam,
      chartData
    } = toRefs(props);

    // chart dom,InstanceType获取子组件的类型
    let myRef = ref<InstanceType<typeof ViewChart> | null>(null);

    //初始数据
    let xyData = ref([
      ['2024-04-10 1:00', 20],
      ['2024-04-10 2:00', 40],
      ['2024-04-10 3:00', 90],
      ['2024-04-10 4:00', 60],
      ['2024-04-10 5:00', 10],
      ['2024-04-10 6:00', 40],
      ['2024-04-10 7:00', 60],
      ['2024-04-10 8:00', 60],
      ['2024-04-10 9:00', 20],
      ['2024-04-10 10:00', 40],
      ['2024-04-10 11:00', 90],
      ['2024-04-10 12:00', 60],
      ['2024-04-10 13:00', 10],
      ['2024-04-10 14:00', 40],
      ['2024-04-10 15:00', 60],
      ['2024-04-10 16:00', 20],
      ['2024-04-10 17:00', 40],
      ['2024-04-10 18:00', 90],
      ['2024-04-10 19:00', 60],
      ['2024-04-10 20:00', 10],
      ['2024-04-10 21:00', 40],
      ['2024-04-10 22:00', 60],
      ['2024-04-10 23:00', 60],
      ['2024-04-10 24:00', 60]
    ]);

    //chart数据样式
    let myOption: EChartsOption = {
      title: {
        show: true,
        text: chartParam.value.title,
        left: 'center',
        textStyle: {
          fontWeight: 'bolder',
          fontSize: 18
        }
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      legend: {
        show: false,
        orient: 'horizontal', // 图例列表的布局朝向(horizontal或vertical)
        itemWidth: 18,
        itemHeight: 12,
        icon: 'roundRect',
        left: '50%',
        tooltip: {  //  鼠标hover提示,图表配置了tooltip后才会生效
          show: true
        }
      },
      grid: {
        show: true,
        backgroundColor: 'transparent' //背景色
      },

      //声明1个X轴
      xAxis: {
        type: 'category', // x轴坐标轴类型
        name: chartParam.value.xName
      },

      //声明1个Y轴
      yAxis: {
        type: 'value',
        name: chartParam.value.yName
      },

      dataset: {
        dimensions: [chartParam.value.xName, chartParam.value.yName],
        source: xyData.value
      },

      series: [
        {
          type: 'line',
          smooth: true
        }
      ]
    };

    //初始化数据
    const init = () => {
      if (chartData.value.length > 0) {
        xyData.value.length = 0;
        chartData.value.forEach((item) => {
          xyData.value.push([item.xName, item.yData]);
        })
      }
    }

    //监视变量变化
    watch(() => chartData, () => {
      init();
    }, { deep: true })

    // 挂载组件
    onMounted(() => {
      init();
    });

    return {
      myRef,
      myOption
    };
  }
});
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  left: 20px;
  top: 30px;
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>
